---
slug: /
description: React components for Chart.js
---

import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';
import Logo from '@site/static/img/logo.svg';

# react-chartjs-2

<Logo className='logo' width={150} height={150} />

React components for [Chart.js](https://www.chartjs.org), the most popular charting library.

Supports Chart.js v4 (read below) and Chart.js v3 (see [this guide](/docs/chartjs-v3)).

[![NPM version][npm]][npm-url]
[![Downloads][downloads]][downloads-url]
[![Build status][build]][build-url]
[![Coverage status][coverage]][coverage-url]
[![Bundle size][size]][size-url]

[npm]: https://img.shields.io/npm/v/react-chartjs-2.svg
[npm-url]: https://www.npmjs.com/package/react-chartjs-2

[downloads]: https://img.shields.io/npm/dm/react-chartjs-2.svg
[downloads-url]: https://www.npmjs.com/package/react-chartjs-2

[build]: https://img.shields.io/github/actions/workflow/status/reactchartjs/react-chartjs-2/ci.yml?branch=master
[build-url]: https://github.com/reactchartjs/react-chartjs-2/actions

[coverage]: https://img.shields.io/codecov/c/github/reactchartjs/react-chartjs-2.svg
[coverage-url]: https://app.codecov.io/gh/reactchartjs/react-chartjs-2

[size]: https://img.shields.io/bundlephobia/minzip/react-chartjs-2
[size-url]: https://bundlephobia.com/package/react-chartjs-2

## Quickstart

Install this library with peer dependencies:

<Tabs>
  <TabItem value="yarn" default>

  ```bash
  yarn add chart.js react-chartjs-2
  ```

  </TabItem>
  <TabItem value="pnpm">

  ```bash
  pnpm add chart.js react-chartjs-2
  ```

  </TabItem>
  <TabItem value="npm">

  ```bash
  npm install --save chart.js react-chartjs-2
  ```

  </TabItem>
</Tabs>

Then, import and use individual components:

```jsx
import { Chart as ChartJS, ArcElement, Tooltip, Legend } from "chart.js";
import { Doughnut } from "react-chartjs-2";

ChartJS.register(ArcElement, Tooltip, Legend);

<Doughnut data={...} />
```

To learn more about importing and registering elements see [tree-shaking](https://react-chartjs-2.js.org/docs/migration-to-v4/#tree-shaking).

:::tip Need an API to fetch data?
Please consider [Cube](https://cube.dev/?ref=eco-react-chartjs), an open-source API for data apps.
:::

## Examples

Please see [live examples](/examples).

:::tip Need a guide?
Please check "[Chart.js Example with Dynamic Dataset](https://cube.dev/blog/chart-js-example-with-dynamic-dataset/?ref=eco-react-chartjs)".
:::

## Getting Help

Need help? Ask your question on [Stack Overflow](https://stackoverflow.com/questions/tagged/react-chartjs-2).

If you've encountered an issue, please [file it on GitHub](https://github.com/reactchartjs/react-chartjs-2/issues).
